
.category {
	border-top: 1px solid #d6d6d6;
	
	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		height: 100%;

		&>view {
			width: 100%;
		}

		.scroll-panel {
			flex-grow: 1;
			height: 0;
			overflow: hidden;
		}

		.bottom-panel {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 26rpx;

		.left {
			width: 200rpx;
			background-color: #f6f6f6;
			line-height: 80rpx;
			box-sizing: border-box;

			.item {
				padding-left: 20rpx;
				position: relative;

				&:not(:first-child) {
					margin-top: 1px;

					&::after {
						content: '';
						display: block;
						height: 0;
						border-top: #d6d6d6 solid 1px;
						width: 620upx;
						position: absolute;
						top: -1px;
						right: 0;
						transform: scaleY(0.5);
						/* 1px像素 */
					}
				}

				&.active {
					color: #42b983;
					background-color: #fff;
				}
			}

			.fill-last {
				height: 0;
				width: 100%;
				background: none;
			}
		}

		.main {
			background-color: #fff;
			padding-left: 20rpx;
			width: 0;
			flex-grow: 1;
			box-sizing: border-box;



			.title {
				line-height: 64rpx;
				font-size: 24rpx;
				font-weight: bold;
				color: #666;
				background-color: #fff;
				position: sticky;
				top: 0;
				z-index: 19;
			}

			.item {
				padding-bottom: 10rpx;
				border-bottom: #eee solid 1px;
			}

			.goods {				
				margin-bottom: 20rpx;
				.top{
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					margin-bottom: 10rpx;
					
					image {
						width: 400rpx;
						height: 164rpx;
						margin-right: 16rpx;
						margin-left: 2px;
						border: 1px solid #d6d6d6;
						padding: 10rpx;
					}
					
					.right {
						padding-right: 26rpx;
						width: 100%;
						padding-right: 13px;
						display: flex;
						flex-direction: column;
						justify-content: space-around;
					}
					
					.name {
						font-size: 32rpx;
						font-weight: bold;
					}
					
					.describe {
						font-size: 24rpx;
						color: #999;
					}
				}
				.moq {
					color: #d43030;
					margin: 5px 0;
					.moq_val {
						font-weight: bold;
					}
				}

				.btns {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					width: 100%;
					align-items: center;
					margin-left: 5px;
					.opts {
						flex-shink: 0;
						width: 130px;
						display: flex;
						justify-content: center;
						align-items: center;
						input {
							width: 80px;
							text-align: center;
							background-color:#F2F6FC;
						}
						>span {
							height: 20px;
							width: 20px;
							text-align: center;
							font-size: 20px;
							&.l {
								margin-right: 5px;
							}
							&.r {
								margin-left: 5px;
							}
						}
					}
					.func {
						&.disabled {
							// background-color: #ddd!important;
						}
					}
					.sell_out {
						text-align: center;
						width: calc(100% - 130px);
						color: #aaa;
						font-size: 13px;
					}
					::v-deep uni-button[type=warn] {
						color: #fff;
						background-color: rgba(253, 90, 56, 0.9285714285714286);
					}
				}

				.money {
					font-size: 28rpx;
					color: #d43030;
				}
			}
		}
	}
	}